<template>
  <div>
    <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
          v-model="search_name"
          placeholder="请输入内容"
          style="width: 200px"
          clearable
          id="label_1"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        <label for="label_2">联系方式: </label>
        <el-input
          v-model="search_phone"
          placeholder="请输入内容"
          style="width: 200px; height: 40px"
          clearable
          id="label_2"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        <label for="label_3">访问时间: </label>
        <el-select v-model="search_visittime" placeholder="请选择" id="label_3">
          <el-option
            v-for="item in visittime_options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </span>
      <span>
        <el-button type="primary" @click="handelSearch" icon="el-icon-search"
          >查询</el-button
        >
      </span>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :row-style="{ height: '32px' }"
        :header-row-style="{ height: '10px' }"
        :cell-style="{ padding: '1px' }"
      >
        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
        <el-table-column prop="age" label="年龄" width="150"></el-table-column>
        <el-table-column prop="come" label="客户来源"></el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="come_at"
          label="预计到院时间"
          width="150"
          :formatter="handleDateFormatter"
        ></el-table-column>
        <el-table-column prop="next_visit_at" label="下次访问时间" width="250">
          <template slot-scope="scope">
            <span :style="{ color: handleIsRed(scope.row.next_visit_at) }">
              {{ scope.row.next_visit_at | dateFormatter }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <i
              class="el-icon-phone-outline"
              @click="handleEdit(scope.$index, scope.row)"
            ></i>
            &nbsp;&nbsp;&nbsp;
            <i
              class="el-icon-folder"
              @click="handleShowAll(scope.$index, scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 存放编辑组件 -->
    <div v-show="showEdit">
      <CallPhone ref="callphone"></CallPhone>
    </div>
    <div v-show="showAll">
      <ShowAll ref="showall"></ShowAll>
    </div>
  </div>
</template>

<script>
import CallPhone from "./CallPhone";
import ShowAll from "./ShowAll";
import { dateFormat } from "@/utils/time.js";

const starttime = parseInt(
  new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000
); //获取当天零点的时间
const endtime = parseInt(
  new Date(
    new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
  ).getTime() / 1000
); //获取当天23:59:59的时间

export default {
  name: "UserList",
  data() {
    return {
      search_name: "",
      search_phone: "",
      search_visittime: 1,
      tableData: [],
      currentPage: 1, // 默认 1
      total: 0,
      showAll: false,
      showEdit: false,
      visittime_options: [
        { value: 1, label: "今天" },
        { value: 2, label: "明天" },
        {
          value: 3,
          label: "全部",
        },
      ],
      next_visit_at: 0,
    };
  },
  methods: {
    handleEdit(index, row) {
      this.showEdit = true;
      this.$refs.callphone.handleOpen(row);
    },
    handleShowAll(index, row) {
      this.showAll = true;
      this.$refs.showall.handleOpen(row);
    },
    // 格式化时间
    handleDateFormatter(row, column) {
      // console.log("col: ", column)
      if (column.property === "next_visit_at") {
        return dateFormat(row.next_visit_at);
      }
      if (column.property === "come_at") {
        return dateFormat(row.come_at);
      }
    },
    // 时间小于当天 0 点则为红色
    handleIsRed(timestamp) {
      let curTime0 = parseInt(
        new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000
      ); //获取当天零点的时间
      return timestamp < curTime0 ? "red" : "";
    },
    // 查询
    handelSearch() {
      let search_starttime = starttime;
      let search_endtime = endtime;
      if (this.search_visittime === 2) {
        search_starttime += 24 * 3600;
        search_endtime += 24 * 3600;
      }
      if (this.search_visittime === 3) {
        search_starttime = "";
        search_endtime = "";
      }

      let searchCondition = {
        search_name: this.search_name,
        search_phone: this.search_phone,
        search_starttime: search_starttime,
        search_endtime: search_endtime,
      };
      // console.log(searchCondition);
      this.handleInitVisitListData(1, searchCondition);
    },
    // 分页
    handleCurrentChange(curPage) {
      this.handleInitVisitListData(curPage);
    },
    // 加载数据
    handleInitVisitListData(curPage = 1, params = {}) {
      // console.log(curPage);
      params["uid"] = this.COOKIE.get("uid");
      if (this.search_visittime === 1) {
        // 默认今天
        params["search_starttime"] = starttime;
        params["search_endtime"] = endtime;
      }
      // console.log(params)
      this.AXIOS.get(`/mycrmapi/visit/list?cur_page=${curPage}`, {
        params: params,
      })
        .then((res) => {
          // console.log(res.data)
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.error(err);
          this.$message({ type: "error", message: err });
        });
    },
  },
  filters: {
    dateFormatter(timestamp) {
      return dateFormat(timestamp);
    },
  },
  components: {
    CallPhone,
    ShowAll,
  },
  // 加载页面数据
  mounted() {
    this.handleInitVisitListData();
  },
};
</script>

<style scoped>
.header {
  text-align: left;
  /* font-weight: bold; */
}

.content {
  margin-top: 40px;
}

.footer {
  position: fixed;
  bottom: 15px;
  left: 200px;
}
</style>
